/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

import {useState, useEffect, type ReactNode} from 'react';
import clsx from 'clsx';
import Link from '@docusaurus/Link';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import useBaseUrl from '@docusaurus/useBaseUrl';

import Layout from '@theme/Layout';

import Tweet, {Props as TweetProps} from '@site/src/components/Tweet';
import Tweets from '@site/src/data/tweets';
import Quotes from '@site/src/data/quotes';
import Features, {type FeatureItem} from '@site/src/data/features';
import Heading from '@theme/Heading';

import styles from './styles.module.css';


function HeroBanner() {
  return (
    <div className={styles.hero} data-theme="dark">
      <div className={styles.heroInner}>
        <Heading as="h1" className={styles.heroProjectTagline}>
          <img
            alt={'开放原子开源运营专区'}
            className={styles.heroLogo}
            src={useBaseUrl('/img/slogan.jpeg')}
            width="200"
            height="200"
          />
          <span
            className={styles.heroTitleTextHtml}
          >
            基于<b>AtomGit开源协作平台</b>底座 <br/>
            提供<b>开源社区SaaS</b>服务
          </span>
        </Heading>
        <div className={styles.indexCtas}>
          <Link className="button button--primary" to='https://survey.atomgit.com/render/NoRneDxR?t=1744190405189'>
            申请开通
          </Link>
          <Link className="button button--info" to="/showcase">
            用户案例
          </Link>
        </div>
      </div>
    </div>
  );
}

function TweetsSection() {
  const tweetColumns: TweetProps[][] = [[], [], []];
  Tweets.forEach((tweet, i) =>
    tweetColumns[i % 3].push(tweet),
  );

  return (
    <div className={clsx(styles.section, styles.sectionAlt)}>
      <div className="container">
        <Heading as="h2" className={clsx('margin-bottom--lg', 'text--center')}>
          社区评价
        </Heading>
        <div className={clsx('row', styles.tweetsSection)}>
          {tweetColumns.map((tweetItems, i) => (
            <div className="col col--4" key={i}>
              {tweetItems.map((tweet, index) => (
                <Tweet {...tweet} key={index} />
              ))}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function QuotesSection() {
  return (
    <div className={clsx(styles.section)}>
      <div className="container">
        <div className="row">
          {Quotes.map((quote) => (
            <div className="col" key={quote.name}>
              <div className="avatar avatar--vertical margin-bottom--sm">
                <div className="avatar__intro padding-top--sm">
                  <div className="avatar__name">{quote.name}</div>
                </div>
              </div>
              <p className="text--center padding-horiz--md">
                {quote.text}
              </p>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function Feature({
  feature,
  className,
}: {
  feature: FeatureItem;
  className?: string;
}) {
  return (
    <div className={clsx('col', className)}>
      <img
        className={styles.featureImage}
        alt={feature.title}
        width={Math.floor(feature.image.width)}
        height={Math.floor(feature.image.height)}
        src={feature.image.src}
        loading="lazy"
      />
      <Heading as="h3" className={clsx(styles.featureHeading)}>
        {feature.title}
      </Heading>
      <p className="padding-horiz--md">{feature.text}</p>
    </div>
  );
}

function FeaturesContainer() {
  const firstRow = Features.slice(0, 3);
  const secondRow = Features.slice(3);

  return (
    <div className="container text--center">
      <div className="row margin-top--lg margin-bottom--lg">
        {firstRow.map((feature, idx) => (
          <Feature feature={feature} key={idx} />
        ))}
      </div>
      <div className="row">
        {secondRow.map((feature, idx) => (
          <Feature
            feature={feature}
            key={idx}
            className={clsx('col--4', idx === 0 && 'col--offset-2')}
          />
        ))}
      </div>
    </div>
  );
}

function TopBanner() {
  return (
    <div className={styles.topBanner}>
      <div className={styles.topBannerTitle}>
        <span
          className={styles.topBannerTitleText}
          >
          开源社区一站式解决方案
        </span>
      </div>
    </div>
  );
}

const GIF_IMAGES = [
  '1.png', '2.png', '3.png', '4.png', '5.png', '6.png',
  '7.png', '8.png', '9.png', '10.png', '11.png', '12.png',
  '13.png', '14.png', '15.png', '16.png', '17.png', '18.png'
];

function GifContainer() {
  const [currentImageIndex, setCurrentImageIndex] = useState<number>(0);
  
  // Cache all images in memory
  const imageUrls = GIF_IMAGES.map(image => useBaseUrl(`/img/gif/${image}`));

  useEffect(() => {
    // Preload all images
    imageUrls.forEach(url => {
      new Image().src = url;
    });

    const interval = setInterval(() => {
      setCurrentImageIndex(prev => (prev + 1) % GIF_IMAGES.length);
    }, 3000);
  
    return () => clearInterval(interval);
  }, []);

  return (
    <div className="container text--center margin-top--xl">
      <div className="row">
        <div className="col">
          <Heading as="h2">
            运营专区生态支持
          </Heading>
          <div className={styles.carouselContainer}>
            {imageUrls.map((url, index) => (
              <img
                key={url}
                src={url}
                className={`${styles.carouselImage} ${index === currentImageIndex ? styles.active : ''}`}
                alt="运营专区功能展示"
                loading="eager"
              />
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

export default function Home(): ReactNode {
  const {
    siteConfig: {customFields, tagline},
  } = useDocusaurusContext();
  const {description} = customFields as {description: string};
  return (
    <Layout title={tagline} description={description}>
      <main>
        <TopBanner />
        <HeroBanner />
        <div className={styles.section}>
          <FeaturesContainer />
          <GifContainer />
        </div>
        <TweetsSection />
        <QuotesSection />
      </main>
    </Layout>
  );
}
